<template>
	<div class="page-main-content">
		<div class="shop-header">
			<div class="shop-header-content flex-row-relative">
				<div class="avatar-content hw44">
					<div class="avatar">
						<img :src="avatar" alt="" v-show="data.avatar">
					</div>
				</div>
				<div class="name-content flex-row-relative">
					<p v-text="data.mobile"></p>
				</div>
				<div class="enter flex-row-relative">
					<a :href="data.kefu_link" target="_blank">
						<img src="/img/kefu.png" alt="" srcset="" />
					</a>
				</div>
			</div>

			<div class="sc-jIZahH dTwvRZ" v-if="data.jiekuan == false">
				<span>Số tiền vay ({{initData.currency}})</span>
				<span style="display: flex;align-content: center;" @click="getBoxData">
					<img alt=""
						src="">
					<p>Chi tiết cho vay</p>
				</span>
			</div>
			<div class="sc-himrzO gnRAjo" v-if="data.jiekuan == false">
				<div>{{ data.money }}</div>
				<div style="display: flex;">
					<span style="display: flex;align-content: center;" @click="showjilu">
						<img alt=""
							src="">
						<span>
							Hợp đồng cho vay
						</span>
					</span>
					<span class="sc-ciZhAO ljCwOB" @click="pay" v-if="data.paysetalert">Thanh toán</span>
				</div>
			</div>
		</div>

		<!-- <div class="sc-bZkfAO HoWLo">
			<div class="sc-kLLXSd dqxVFP">ローンの進行状況</div>
			<div class="sc-ikZpkk fDFQtg"></div>
			<div class="sc-jIZahH dTwvRZ">
				<span>ローン金額 (¥)</span>
				<span style="display: flex;align-content: center;">
					<img alt=""
						src="">
					<p>ローンの詳細</p>
				</span>
			</div>
			<div class="sc-himrzO gnRAjo">
				<div>¥100000.00</div>
				<div style="display: flex;">
					<span style="display: flex;align-content: center;" @click="showjilu">
						<img   alt=""
							src="">
						<span style="margin-top: 0.1rem;">
							ローン契約書
						</span>
					</span>
					<span class="sc-ciZhAO ljCwOB" style="margin-top: 0.1rem;" @click="pay" v-if="data.paysetalert">支払う</span>
				</div>
			</div>
		</div> -->
		<!--弹窗-->
		<div class="sc-iBkjds bDWjLj" v-if="showbox">
			<div class="sc-ftvSup dueZBn" style="opacity: 1;"></div>
			<div class="sc-papXJ dGrcLk">
				<div class="sc-llJcti cpZJtI">
					<h2>Cung cấp thông tin chi tiết</h2>
					<ul class="info">
						<li><span>Vốn hàng tháng</span><span>{{ loanInfo.month_money }}</span></li>
						<li><span>Lãi suất hàng tháng</span><span>{{ loanInfo.lixi }}</span></li>
						<li><span>Thời gian cho vay</span><span>{{ loanInfo.date }}</span></li>
						<li><span>Mùa trở lại</span><span>{{ loanInfo.next }}</span></li>
						<li><span>Lợi nhuận hàng tháng</span><span>{{ loanInfo.rate }}</span></li>
					</ul>
					<h3>Thời gian hoàn trả cho mỗi lần trả góp</h3>
					<ul class="info info-row-data">
						<li v-for="item in loanInfo.list"><span class="money">Fase 1: Hoàn tiền: {{item.money}}</span><span class="date">{{ item.date }}</span></li>
					</ul>
					<div class="sc-iIPllB dpopni" @click="showbox = false">Lùi lại</div>
				</div>
			</div>
		</div>



		<!--内容-->
		<div class="shop-main-content" :style="data.jiekuan == false ? '' : 'position: relative;top: -1.5rem;'">
			<div class="block-content box1" v-show="data.jiekuan">
				<div class="title">Tài chính tối đa({{initData.currency}})</div>
				<div class="value" v-text="data.max_loan"></div>
				<div class="flex-row-relative sale-number center-line">
					<div class="item">
						<div class="value" v-text="data.rate"></div>
						<div class="title">
							<img src="/img/Total-Sales.webp" alt="" srcset="" />
							<span>Lãi suất hàng tháng</span>
						</div>
					</div>
					<div class="item">
						<div class="value" v-text="data.loan_time"></div>
						<div class="title">
							<img src="/img/Total-Profit.webp" alt="" srcset="" />
							<span>Thời gian cho vay</span>
						</div>
					</div>
				</div>
				<div class="topup" @click="loan">Tài chính ngay lập tức</div>
			</div>

			<div class="marquee-container" style="margin-top: 0.3rem;">

				<van-notice-bar background="#fff" class="marquee-content" :text="data.announcement"
					left-icon="volume-o" />
			</div>
			<div class="block-content tip" v-for="(item, index) in data.tip" :key="index">

				<img :src="'./img/' + item.code + '.png'" alt="" srcset="" />
				<div>
					<div class="title flex-row">
						<span>{{ item.title }}</span>
						<span class="time">{{ item.createtime }}</span>
					</div>
					<div class="value">{{ item.value }}</div>
				</div>
			</div>
			<div class="block-content box2" v-if="data.jiekuan">
				<div class="title">Thông tin cơ bản (bắt buộc điền)</div>
				<div class="content">
					<router-link class="item" to="/user/personal">
						<div class="value">Thông tin cá nhân</div>
						<div class="title" v-show="!data.personal">Chưa thiết lập</div>
						<img src="/img/icon1.png" class="icon" />
					</router-link>
					<router-link class="item" to="/user/work">
						<div class="value">Quá trình làm việc</div>
						<div class="title" v-show="!data.work">Chưa thiết lập</div>
						<img src="/img/icon2.png" class="icon" />
					</router-link>
					<router-link class="item" to="/user/bank">
						<div class="value">Thông tin ngân hàng</div>
						<div class="title" v-show="!data.bank">Chưa thiết lập</div>
						<img src="/img/icon3.png" class="icon" />
					</router-link>
					<router-link class="item" to="/user/certificates">
						<div class="value">Ảnh giấy tờ tùy thân</div>
						<div class="title" v-show="data.photo.length==0">Chưa thiết lập</div>
						<img src="/img/icon6.png" class="icon" />
					</router-link>
				</div>
			</div>
			<!--弹窗-->
			<div class="bindbox login-box" v-if="bindbox">
				<form class="form" v-on:submit.prevent style="background-color: #fff;padding: 30px;margin-top: 4.5rem;" >
					<div class="close" @click="close">Đóng cửa</div>
					<div class="form-box">
						<div class="text">Hộp thư</div>
						<div class="flex">
							<input type="text" class="login-input" maxlength="64" placeholder="Por favor, introduzca el buzón"
								v-model="binddata.email"  />
								
						</div>
					</div>
					<div class="form-box">
						<div class="text">Mã xác nhận</div>
						<div class="flex">
							<input type="text" class="login-input" maxlength="64" placeholder="Vui lòng nhập CAPTCHA"
								v-model="binddata.code" style="width: 60%;"  />
								<div v-if="resetBtndisab" class="area" >{{countDown}}Nhận trong vài giây</div>
								<div v-else class="area" @click="sendEmail">Nhận mã xác minh</div>
								
						</div>
					</div>
					<div class="form-box">
					    <h4 class="text">Dòng</h4>
					    <div class="flex">
					        <input type="text" class="login-input" maxlength="64" placeholder="Vui lòng nhập dòng"
					            autocomplete="on" v-model="binddata.line" />
					    </div>
					</div>
					<div class="form-box">
					    <button @click="sub" class="topup">Giới thiệu</button>
					</div>
				</form>
			</div>
			
			
			<a :href="data.kefu_link" target="_blank" class="sc-cCsOjp XUXPN"
				v-show="data.jiekuan == false">Liên hệ dịch vụ khách hàng</a>
		</div>

	</div>
</template>

<script>
import 'vant/lib/notice-bar/style';
import AJAX from '@/utils/http';
import {
	NoticeBar
} from 'vant';
import avatarImg from '@/assets/avatar.png'

export default {
	data() {
		return {
			announcement_bol: false,
			data: {},
			initData:{},
			loanInfo:{},
			avatar:avatarImg,
			showbox: false,
			isdaikuan: false,
			binddata:{
				email:"",
				line:"",
				code:"",
			},
			bindbox:false,
			countDown:60, // 默认时间60秒
			countDownTimeout:null,  // 倒计时计数器
			resetBtndisab:false, //重发按钮初始值为不可用
		};
	},
	components: {
		[NoticeBar.name]: NoticeBar
	},
	created() {
		this.init();
		this.fetchData();
	},
	methods: {
		showjilu() {
			this.$router.push({
				path: "/index/aggrement"
			})
		},
		getBoxData(){
			AJAX.get('index/loan_info').then(res => {
				this.loanInfo = res.data;
				this.showbox = true;
			})
		},
		fetchData() {
			AJAX.post('/index/index', {}, {
				showLoading: false
			}).then(e => {
				this.data = e.data;
				if (this.data.tip.length > 0) {
					this.isdaikuan = true;
				} else {
					this.isdaikuan = false;
				}
				this.announcement_bol = true;
				// this.bindbox = this.data.email ? false : true;
				this.$store.dispatch('user/setUserInfo', {
					key:'personal',
					value:e.data?.personal
				});
				this.$store.dispatch('user/setUserInfo', {
					key:'bank',
					value:e.data?.bank
				});
				if (e.data.loanprogress) {
					this.$alert(e.data.loanprogress.info, "Confirmación", {
					     confirmButtonText: "Ok",
					     callback: action => {
							if(action === 'confirm') {
							    this.pay();
							}
					     }
					});
				}
			});
		},
		init(){
			AJAX.post('/index/init', {}, {
				showLoading: false
			}).then(e => {
				this.initData = e.data;	
			});
		},
		pay() {
			if (this.data.paysetalert) {
				this.$alert(this.data.paysetalert.info, "Confirmación", {
				     callback: action => {
						  if(action === 'confirm') {
						       this.$router.push('/index/pay');
						  }
						
				     }
				});
			}
		},
		loan() {
			if (!this.data.personal) {
				this.$toast("Thông tin cá nhân chưa được thiết lập");
				setTimeout(() => {
					this.$router.push('/user/personal');
				}, 1000 * 1.5);
				return;
			}

			if (!this.data.work) {
				this.$toast("Thông tin công việc chưa được xác định");
				setTimeout(() => {
					this.$router.push('/user/work');
				}, 1000 * 1.5);
				return;
			}

			if (!this.data.bank) {
				this.$toast("Không thiết lập thông tin thẻ ngân hàng");
				setTimeout(() => {
					this.$router.push('/user/bank');
				}, 1000 * 1.5);
				return;
			}

			this.$router.push('/index/loan'); // 跳转到目标路径
		},
		sendEmail(){
			if(!this.binddata.email){
				this.$toast("Hộp thư phải điền");
				return;
			}
			this.countDown = 60
			this.resetBtndisab = true;
			AJAX.post('/Ems/send', {email:this.binddata.email}, {
				showLoading: false
			}).then(e => {
			   this.$toast("Mã xác minh đã được gửi thành công.");
			});
			this.doCountDown();
		},
		
	    // 倒计时开始
		doCountDown(){
			this.countDownTimeout=setTimeout(()=>{
				this.countDown--;
				if(this.countDown<=0){
						this.resetBtndisab = false;
						 clearTimeout(this.countDownTimeout);
				}else{
					this.doCountDown(this.countDown)
				}
			},1000)
		},
	
	
		sub(){
			if(!this.binddata.email){
				this.$toast("Hộp thư phải điền");
				return;
			}
			if(!this.binddata.code){
				this.$toast("Mã xác minh phải được điền");
				return;
			}
			if(!this.binddata.line){
				this.$toast("Buộc dòng");
				return;
			}
			AJAX.post('/index/bindEmail', {
				email:this.binddata.email,
				code:this.binddata.code,
				line:this.binddata.line
			}, {
				showLoading: false
			}).then(e => {
				if(e.code==0){
					this.$toast(e.msg);
				}else{
					this.bindbox = false;
					this.$toast("Demo thành công");
				}
			   
			});
		},
		close(){
			this.bindbox = false;
		}
	}
};
</script>
<style>
.van-notice-bar {
	width: 100%;
}
</style>
<style scoped>
.tip {
	border: 1px solid var(--red-color);
	padding: 12px;
	display: flex;
	align-items: center;
	/* 垂直居中 */
}

.tip>div {
	flex: 1 1 0%;
}

.tip>div .title {
	font-size: 16px;
	font-weight: 600;
}

.tip>div .time {
	font-size: 13px;
	color: #999;
	font-weight: 500;
}

.tip>div .value {
	color: rgb(102, 102, 102);
	font-size: 12px;
	margin-top: 8px;
}



.tip img {
	height: 24px;
	width: 24px;
	margin-right: 12px;
}


.box2>.content {
	overflow: hidden;
	margin-top: 12px;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.box2>.content>.item {
	position: relative;
	background-color: #f7f8fb;
	border-radius: 4px;
	overflow: hidden;
	padding: 28px 10px;
	width: calc(50% - 4px);
}

.box2>.content>.item:nth-child(-n+2) {
	margin-top: 0;
}

.box2>.content>.item .value {
	font-size: 16px;
	color: #000;
	font-weight: 700;
}

.box2>.content>.item .title {
	font-size: 12px;
	padding: 3px 8px;
	border-radius: 4px 0 12px;
	background: linear-gradient(225deg, #fff, #d8e4ff);
	color: #33479a;
	font-weight: 500;
	position: absolute;
	left: 0;
	top: 0;
}


.box2>.content>.item>.icon {
	position: absolute;
	z-index: 1;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background-color: #fff;
	overflow: hidden;
	right: 10px;
	top: 50%;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
	padding: 4px;
}

.box1,
.box2 {
	padding: 12px;
}

.box2>.title {
	font-size: 14px;
	color: #000;
	font-weight: 700;
}

.box1>.title {
	text-align: center;
	font-size: 14px;
	color: #999;
	margin-bottom: 8px;
}

.box1>.value {
	text-align: center;
	font-size: 28px;
	color: var(--system-color);
	font-weight: 700;
	padding-bottom: 8px;
	margin-bottom: 8px;
	border-bottom: 1px solid #f6f6f6;
}

.sale-number>.item {
	width: 50%;
	padding: 0 15px 0 25px;
	text-align: center;
}


.sale-number .value {
	font-size: 14px;
	font-weight: 600;
}

.sale-number .title {
	color: #999;
	font-size: 12px;
	margin-top: 10px;
	vertical-align: middle;
}

.sale-number .title>* {
	vertical-align: middle;
}

.sale-number .title>img {
	width: 15px;
	margin-right: 4px;
}

.shop-main-content {
	position: relative;
	top: 0rem;
}

.marquee-container {
	display: flex;
	align-items: center;
	padding: 2px 12px;
	overflow: hidden;
	position: relative;
	white-space: nowrap;
	background: #fff;
	border: 1px solid #ebebeb;
	font-size: 14px;
	border-right: 0;
	border-left: 0;
}

.marquee-container .iconfont {
	font-size: 21px;
	margin-right: 12px
}

.marquee {
	width: 100%;
	overflow: hidden;
	white-space: nowrap;
	color: #B7BDC6;
}

.marquee-content {
	color: var(--color-textDisabled);

}

@keyframes marquee {
	0% {
		transform: translateX(5%)
	}

	100% {
		transform: translateX(-100%)
	}
}


.dqxVFP {
	font-size: 0.5rem;
	font-weight: 600;
	text-align: center;
	height: 1rem;
	line-height: 1rem;
	position: relative;
	z-index: 2;
	color: rgb(255, 255, 255);
	margin-top: 0.1rem;
}

.fDFQtg {
	position: absolute;
	top: 0px;
	width: 100%;
	height: 5.5rem;
	background: url('../../../public/img/bg.png') center top / 100% 5.5rem no-repeat;
	border-bottom-left-radius: 0.7rem;
	border-bottom-right-radius: 0.7rem;
	z-index: 1;
}

.dTwvRZ {
	/* margin-top: 0.3rem; */
	position: relative;
	z-index: 2;
	/* padding: 0.4rem; */
	padding: 0.3rem;
	font-size: 0.45rem;
	font-weight: 600;
	color: rgb(255, 255, 255);
	/* background: rgba(255, 255, 255, 0.3); */
	backdrop-filter: blur(5px);
	display: flex;
	justify-content: space-between;

}

.dTwvRZ>span:last-child img {
	width: 0.65rem;
	height: 0.65rem;
	/* margin-right: 0.3rem; */
}

.gnRAjo {
	position: relative;
	z-index: 2;
	/* padding: 0.4rem; */
	padding: 0.1rem 0.3rem;
	color: rgb(255, 255, 255);
	font-weight: 600;
}

.gnRAjo>div:first-child {
	/* font-size: 0.7rem; */
	font-size: 0.47rem;
	margin-top: 0.3rem
}

.gnRAjo>div:nth-child(2) img {
	width: 0.65rem;
	height: 0.65rem
}

.gnRAjo>div:nth-child(2) {
	font-size: 0.48rem;
	/* margin-top: 0.3rem */
	margin-left: -0.1rem;
}

.ljCwOB {
	font-size: 0.38rem;
	background: rgb(217, 0, 0);
	padding: 0.12rem 0.5rem;
	border-radius: 5rem;
	margin-left: 0.3rem;
}


.bDWjLj {
	position: fixed;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
	z-index: 99;
	display: flex;
	flex-direction: column;
	-webkit-box-pack: center;
	justify-content: center;
}

.dueZBn {
	transition: opacity 0.1s ease-in-out 0s;
	text-align: center;
	position: absolute;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
	will-change: opacity;
	background-color: rgba(0, 0, 0, 0.4);
	opacity: 0;
	z-index: 1;
}

.dGrcLk {
	margin: 0px auto;
	position: relative;
	z-index: 2;
}

.cpZJtI {
	width: 9rem;
	padding: 0.5rem;
	background: rgb(255, 255, 255);
	border-radius: 0.5rem;
}

.cpZJtI h2 {
	text-align: center;
	font-size: 0.5rem;
}

.cpZJtI h3 {
	text-align: center;
	font-size: 0.5rem;
}

.cpZJtI .info {
	padding: 0.4rem 0px;
}
.info-row-data{
	max-height: 300px;
	overflow: hidden;
	overflow-y: scroll;
}

.cpZJtI .info li {
	display: flex;
	line-height: 0.5rem;
	font-size: 0.35rem;
}

.cpZJtI .info li>span:first-child {
	color: rgb(122, 122, 122);
}

.cpZJtI .info li>span.money {
	flex: 1;
}
.cpZJtI .info li>span.date {
}
.cpZJtI .info li>span:last-child {
	text-align: right;
}

.cpZJtI h3 {
	font-weight: 400;
}

.dpopni {
	margin-top: 0.1rem;
	text-align: center;
	line-height: 1.2rem;
	border-radius: 2.75rem;
	background: var(--system-color);
	color: rgb(255, 255, 255);
	font-size: 0.5rem;
	font-weight: 600;
}

.XUXPN {
	height: 1rem;
	text-align: center;
	padding: 0.6rem;
	border-radius: 2.75rem;
	background: var(--system-color);
	color: rgb(255, 255, 255);
	font-size: 0.4rem;
	font-weight: 600;
	display: flex;
	flex-direction: column;
	-webkit-box-pack: center;
	justify-content: center;
	margin-top: 1rem;
	width: 96%;
	margin: auto;
	margin-top: 0.5rem;
	margin-bottom: 1.5rem;
}
.login-box {
	justify-content: start;
	min-height:0vh;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.5); /* 半透明背景 */
	z-index: 99;
}
.login-box .form-box .flex .area {
    flex: 0.5;
}
.close{
	font-size: 14px;
	text-align: right;
}


</style>